<template>
	<view>
		<u-popup v-model="zheshow" mode="bottom" :mask-click="false"  @close="colse">
		<view class="zheshow" >
			<view class="cen_ter">
				<view class="box_At">
					<view class="box_At_text">获取您的手机号</view>
					<view class="box_At_co">获取手机号信息，向用户提供更好使用体验</view>
				<!-- 	<view class="box_B" style="border-top:1px solid #f3f3f3 ;">
						<view class="acvter">头像</view>
						<button v-if="!avatar" class="acvter_all"  open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<view class="mast">请选择头像</view>
						</button>
						<view v-if="avatar" class="img"><image :src="avatar" ></image></view>
					</view>
					<view class="box_B">
						<view class="acvter">昵称</view>
						<input class="acvter_all"  type="nickname" :style="nickname ? 'color:#000' : ''" :value="nickname" @blur="bindblur" placeholder="请输入昵称" />
					</view> -->
					<view class="Brn_S">
						<!-- <view class="btn_btns" @click="colse">取消</view> -->
						<button  class="btn" open-type="getPhoneNumber" @getphonenumber="btns" >
							<view class="btn">立即授权</view>
						</button>
					</view>
				</view>
			</view>
		</view>
		</u-popup>
	</view>
</template>

<script>
	import { userprofile , getPhone } from '@/core/api/index.js'
	export default {
		props:['zheshow'],
		data() {
			return {
				on_zheshows:false,
				zheshow1:false,
				avatar:'',
				nickname:''
			}
		},
		methods: {	
			colse(){
				this.$emit('colse',false)
			},
			onChooseAvatar(e) {
				// console.log(e.detail.avatarUrl)
				let that = this
				uni.uploadFile({
				  url: 'https://shequ.shihongkeji.cn' + '/webapi/file/upload',
				  filePath: e.detail.avatarUrl,
				  name: "file",
				  header: {
				    'token': uni.getStorageSync('token')
				  },
				  success: (uploadFileRes) => {
				    try {
				      let uplodata = JSON.parse(uploadFileRes.data);
				      if (uplodata.code == '00000') {
													console.log(uplodata)
				        // this.vimages.push('https:' + uplodata.result.filePath);
						this.avatar = 'https:' + uplodata.result.filePath
				      } else {
				        uni.showToast({
				          title: '图片上传失败',
				          icon: 'none'
				        });
				      }
				    } catch (e) {
				      console.error('解析上传结果失败:', e);
				      uni.showToast({
				        title: '图片上传失败',
				        icon: 'none'
				      });
				    }
				  },
				  fail: (uploadFileErr) => {
				    console.error('upload fail:', uploadFileErr);
				    uni.showToast({
				      title: '图片上传失败',
				      icon: 'none'
				    });
				  },
				  complete: () => {
				    // 无论成功或失败，都算完成一张
				    
				    // 所有图片上传完成
				    if (this.uploadedCount === this.uploadQueue) {
				      setTimeout(() => {
				        this.isLoading = false;
				        uni.showToast({
				          title: `成功上传张图片`,
				          icon: 'success'
				        });
				      }, 300);
				    }
				  }
				});
			},
			bindblur(e){this.nickname = e.detail.value},
			async btns(e){
				const data = await getPhone({code:e.detail.code})
				console.log(data)
				console.log(e,'e.detail.code换取手机号')
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.showToast({title:'已取消授权登录',icon:'none'})
					this.$refs.popup.close()
					return
				}
				// if(this.avatar==''){
				// 	uni.showToast({title:'请选择上传头像',icon:'none'})
				// 	return
				// }
				// if(this.nickname==''){
				// 	uni.showToast({title:'请填写昵称',icon:'none'})
				// 	return
				// }
				let parmes = {
					nickname:'',
					avatar:'',
					phone:data.data
				}
				const rutls = await userprofile(parmes)
				if(rutls.code == '00000'){
					uni.navigateTo({
						title:'登录成功'
					})
					this.colse()
					this.$store.dispatch('user/getUserinfo')
				}
				// this.$parent.loset({nickname:this.nickname,active:this.active}) // 信息传递父组件中
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zheshow{
		 width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);
		 display: flex;align-items: center;align-items: flex-end;
		.mast{margin-top: 6rpx;}
		.Brn_S{width: 70%;height: 100rpx;display: flex;align-items: center;justify-content: space-between;margin: 100rpx auto;}
		.btn_btns{width: 300rpx;height: 80rpx;background: antiquewhite; display: flex;align-items: center;
		 justify-content: center; border-radius: 0rpx; margin-right: 70rpx;background-color:  #fafafa;color: #F26B2E;}
		.imgs{position: absolute;right: 6%;width: 32rpx;height: 32rpx;}
		.img{width: 90rpx;height: 90rpx;border-radius: 50%;margin-left: 80rpx;image{width: 100%;height: 100%;border-radius: 50%;}}
		.cen_ter{
			width: 100%;height: 400rpx;border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;background-color: #FFFFFF;
			display: flex;align-items: center;justify-content: center;
			.box_At{width: 90%;height: 92%;margin-top: 20rpx;display: flex;flex-direction: column;.box_At_text{font-weight: bold;font-size: 30rpx}
			.box_At_co{font-size: 28rpx;color: #ababab;margin-top: 24rpx;}
			.box_B{width: 100%;height: 120rpx;border-bottom: 1px solid #f3f3f3;display: flex;align-items: center;
			 margin-top: 12rpx;.acvter_all{font-size: 28rpx;color: #ababab;margin-left: 80rpx;}}
			.btn{width:300rpx;margin: 35rpx auto;height: 80rpx;display: flex;align-items: center;justify-content: center;
			 background-color: #F26B2E;color: #FFFFFF;border-radius: 50rpx;font-size: 30rpx;}
		}}
	}
	button {
		border-radius: 30rpx;height: 80rpx !important;padding-left: 0!important ;
		padding-right: 0!important ; background-color: rgba(0,0,0,0) !important;color: #ababab !important;font-family: PingFang SC !important;
	}
	button:after {
	    top: 0;left: 0; border: 1px solid rgba(0,0,0,0) !important; -webkit-transform: scale(.5);
		transform: scale(.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; box-sizing: border-box; border-radius: 10px;
	}	
</style>
